<template>
	<view class="container" :style="'min-height:'+height+'px'">
		<!-- #ifdef MP -->
		<div class="sharebtn">
			<text class="iconfont icon-fenxiang"></text>
			<button open-type="share"></button>
		</div>
		<!-- #endif -->
		<view class="video-cont">
			<!-- #ifdef MP -->
			<view class="video common-bg-img" :style="'background-image:url('+dataInfo.img+')'"></view>
			<!-- #endif -->
		</view>
		<view class="intro-box common-box">
			<view class="item spaceBetween">
				<text class="title">{{dataInfo.title}}</text>
				<view class="bottomFlex">
					<text class="symbol">￥</text>
					<text class="price">{{dataInfo.money / 100.0}}</text>
					<text class="normal-text">元</text>
				</view>
			</view>

		</view>
		<!-- 
		<view class="common-box parse-box">
			<view class="title">认购流程</view>
			<u-parse className="rich-img" :content="dataInfo.text"></u-parse>
		</view> -->
		<view class="bottom-fixed">
			<view class="inner flexVerticle">
				<text>合计：</text>
				<text class="symbol">￥</text>
				<text class="price">{{dataInfo.money / 100.0}}</text>
				<view class="btn-box centerFlex flexRightbox" @click="gotoConfirm(dataInfo.id)">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	import EZUIKitJs from '@/components/EZUIKitJs.vue'
	export default {
		components: {
			uParse,
			EZUIKitJs
		},
		data() {
			return {
				cardId: '',
				height: 0,
				dataInfo: {},
				totalprice: 0,
				isCheckLandId: [],
				seed: [],
				showvideo: false,
			};
		},
		onShow() {

		},
		onLoad(options) {
			const that = this
			this.height = uni.getSystemInfoSync().windowHeight
			that.cardId = options.id
			this.loadData()
		},
		onShareAppMessage() {
			const that = this
			return {
				title: '果王来了',
				imageUrl: 'https://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/share.jpg',
				path: '/pages/tree/home'
			}
		},
		methods: {
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('card', 'getCardDO', {
					cardId: that.cardId
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					that.dataInfo = data
					uni.hideLoading()
				})
			},
			gotoConfirm(id) {
				uni.navigateTo({
					url: '/pages/card/confirm?cardId=' + id
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 0 15px 150upx;
		background-color: #F9F9F9;
	}

	.sharebtn {
		position: fixed;
		bottom: 13%;
		right: 30upx;
		z-index: 9;
		background: #fa5f6f;
		padding: 20upx;
		border-radius: 100%;

		.icon-fenxiang {
			font-size: 60upx;
			color: #fff;
		}

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 1;
		}
	}

	.video-cont {
		position: relative;
		margin-top: 22upx;

		.video {
			width: 100%;
			height: 356upx;
			border-radius: 20upx;
		}

		.change-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: absolute;
			left: -15px;
			top: 0;
			width: 120upx;
			height: 90upx;
			z-index: 9;
			border-top-right-radius: 100%;
			border-bottom-right-radius: 100%;
			background-color: rgba(0, 0, 0, 0.8);

			.change-img {
				width: 90upx;
				height: 90upx;
			}
		}
	}

	.common-box {
		margin-top: 22upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;
	}

	.intro-box {
		padding: 50upx;

		.item:not(:first-child) {
			margin-top: 23upx;
		}

		.title {
			font-size: 30upx;
			font-weight: bold;
		}

		.bottomFlex {
			color: #fa436a;

			.symbol {
				font-size: 26upx;
			}

			.price {
				font-size: 40upx;
				line-height: 1;
			}
		}


		.normal-text {
			font-size: 24upx;
			color: #666666;
			margin-left: 10upx;
		}

		.intro {
			font-size: 24upx;
			color: #333333;
		}

		.location {
			width: 24upx;
			height: 28upx;
			margin-right: 14upx;
		}
	}

	.tab-bar-list {
		padding: 30upx 0 20upx;

		.item {
			width: 108upx;
			height: 44upx;
			font-size: 30upx;
			color: #999999;

			&.active {
				color: #009D44;
				border: 2upx solid #009D44;
				border-radius: 60upx;
				font-weight: bold;
			}

			&:not(:last-child) {
				margin-right: 20upx;
			}
		}
	}

	.slc-list {
		padding: 34upx 40upx 80upx;
	}

	.land-list {
		margin-top: 30upx;
		height: 236upx;

		.list-cont {
			white-space: nowrap;

			&:nth-child(1) {
				margin-bottom: 12upx;
			}
		}

		.item {
			position: relative;
			display: inline-block;
			vertical-align: top;
			width: 200upx;
			height: 112upx;
			background-color: #000;
			margin-right: 15upx;

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .1);
				z-index: 1;
			}

			.status {
				position: absolute;
				top: 0;
				left: 0;
				width: 64upx;
				height: 34upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0, 157, 68, 1);
				border-radius: 0px 0px 20upx 0px;
				font-size: 20upx;
				color: #ffffff;
				z-index: 2;

				&.slced {
					background-color: #FD7716;
				}

				&.disabled {
					background-color: #EEEEEE;
					color: #333333;
				}
			}

			.area {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 36upx;
				font-weight: bold;
				color: #ffffff;
				z-index: 2;
			}

			.slc-btn {
				position: absolute;
				right: 8upx;
				bottom: 8upx;
				width: 32upx;
				height: 32upx;
				z-index: 2;
			}
		}
	}

	.data-list {
		padding: 40upx;

		.subtitle {
			font-size: 36upx;
			color: #333333;
			font-weight: bold;

			&.hasmt {
				margin-top: 83upx;
			}
		}

		.cont-box {
			margin-top: 40upx;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 24upx;
				color: #333333;

				image {
					width: 40upx;
					height: 40upx;
					margin: 26upx 0 34upx;
				}
			}

			.bold {
				font-weight: bold;
			}

			.item-new {
				width: 50%;

				.img-item {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					margin-right: 20upx;
					border: 2upx solid #f0f0f0;
				}

				.normal {
					margin-bottom: 15upx;
					color: #333333;
					font-size: 30upx;
					font-weight: bold;
					line-height: 1;
				}

				.intro {
					font-size: 24upx;
					color: #666666;
					line-height: 1;
				}

				.power {
					vertical-align: super;
				}

				&:nth-child(n) {
					margin-bottom: 57upx;
				}
			}
		}
	}

	.parse-box {
		padding: 50upx 32upx;

		.title {
			margin-bottom: 30upx;
			font-size: 36upx;
			color: #333;
			font-weight: bold;
			text-align: center;
		}

		.rich-img {
			font-size: 24upx;
			color: #666666;
			text-align: justify;
			line-height: 40upx;
		}
	}

	.bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 20upx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		font-size: 30upx;
		color: #333333;
		background-color: #fff;
		box-shadow: 0px 3upx 29upx 0px rgba(196, 196, 196, 0.35);

		.inner {
			padding: 20upx 50upx;
		}

		.symbol {
			color: #fa436a;
		}

		.price {
			font-size: 40upx;
			color: #fa436a;
		}

		.btn-box {
			width: 243upx;
			padding: 16upx;
			border-radius: 50upx;
			font-size: 36upx;
			color: #fff;
			background: #fa436a;
		}
	}

	.spaceBetween {
		flex-wrap: wrap;
	}
</style>
